<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="app">
      <button @click="testThrottle">throttle</button>
      <br/>
      <button @click="testDebounce">testDebounce</button>
    </div>
  </body>
  <script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js"></script>
  <script>
    const InitDom = {
      data() {
        return {
          counter: 0
        }
      },
      mounted() {
        
      },
      methods: {
        testThrottle: _.throttle(function() {
          console.log('throttle', new Date())
        }, 2000, {
          leading: true,
          trailing: false
        }),
        testDebounce: _.debounce(function() {
          console.log('debounce', new Date())
        }, 2000, {
          leading: true,
          trailing: false
        })
      }
    }
    
    Vue.createApp(InitDom).mount('#app')
  </script>
  <!-- <script>
    var app = new Vue({
      el: '#app',
      data: {},
      mounted () {},
      methods: {
        testThrottle: _.throttle(function() {
          console.log("throttle");
        }, 5000, {
          leading: true,
          trailing: false
        })
      }
    });
  </script> -->
</html>
